<template>
    <UxDialog :visible="!!visible" @close="visible && visible()">
        <div class="product-switching">
            <figure><img src="@/assets/images/designer/dialog-swich.png" alt=""></figure>
            <p>Switching products will result in the loss of any unsaved changes. Do you want to save your current design?</p>
            <button type="primary" @click="visible && visible('save')">Save</button>
            <button @click="visible && visible('discard')">Discard</button>
        </div>
    </UxDialog>
</template>
<script>
export default {
    data () {
        return {
            visible: null,
        };
    },
    methods: {
        check () {
            // 检查清晰度
            if (this.$parent.canLeave()) {
                return Promise.resolve('discard');
            } else {
                return new Promise((resolve, reject) => {
                    this.visible = (type) => {
                        if (type) {
                            this.visible = null;
                            resolve(type)
                        } else {
                            this.visible = null;
                            reject('Cancel');
                        }
                    }
                })
            }
        }
    },
};
</script>
<style lang="scss" scoped>
.product-switching {
    width: 320px;
    height: 414px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 40px 14px 14px;

    figure {
        width: 80px;
        height: 80px;
        margin: 0 auto 0;
        img {
            width: 100%;
            height: 100%;
        }
    }

    p {
        flex: 1;
        margin-top: 60px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
        text-align: center;
    }

    button {
        height: 38px;
        & + button {
            margin-top: 8px;
        }
    }
}
</style>
